<template>
  <div>
    <el-button
      type="primary"
      @click="onSave"
    > Save</el-button>

    <el-button
      type="text"
      @click="dialogNodeVisible = true"
    >打开嵌套表单的 Dialog</el-button>

    <div id="flowPanel">1</div>

    <div id="flowViewPanel">1</div>
    <nodeInfo
      :flow-design-object="flowNodeDesignObject"
      :dialog-node-visible.sync="dialogNodeVisible"
      @setNodeEx="onSetNodeEx"
    />
    <lineInfo
      :flow-design-object="flowLineDesignObject"
      :dialog-line-visible.sync="dialogLineVisible"
      @setLineEx="onSetLineEx"
    />
  </div>
</template>
<script>
require('@/vendor/flow/gooflow')
require('@/utils/flowlayout')
import nodeInfo from './components/NodeInfo'
import lineInfo from './components/LineInfo'

export default {
  el: '#formEdit',
  components: { nodeInfo, lineInfo },
  data() {
    return {
      tmp: {
        Id: '',
        SchemeCode: new Date().getTime(),
        SortCode: '1',
        FrmId: ''
      },
      forms: [],
      frmPreview: '',
      dialogNodeVisible: false,
      dialogLineVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      flowDesignPanel: null,
      flowNodeDesignObject: null,
      flowLineDesignObject: { from: '', to: '' }
    }
  },
  updated() { },
  mounted() {
    /* =========流程设计（begin）======================*/
    this.flowDesignPanel = $('#flowPanel').flowdesign({
      width: '100%',
      height: 600,
      OpenNode: object => {
        // console.log(object)
        this.flowNodeDesignObject = object // 为NodeInfo窗口提供调用
        if (object.type === 'start round mix' || object.type === 'end round') {
          abp.message.error('开始节点与结束节点不能设置')
          return false
        }
        this.dialogNodeVisible = true

        // layer.open({
        //   type: 2,
        //   area: ['550px', '450px'], // 宽高
        //   maxmin: true, // 开启最大化最小化按钮
        //   title: '节点设置【' + object.name + '】',
        //   content: '/flowschemes/nodeInfo',
        //   btn: ['确定', '取消'],
        //   yes: function(index, layero) {
        //     var body = layer.getChildFrame('body', index)
        //     var iframeWin = window[layero.find('iframe')[0]['name']] // 得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
        //     var nodedata = iframeWin.getVal()
        //     flowDesignPanel.SetNodeEx(object.id, nodedata)
        //     layer.close(index)
        //   },
        //   cancel: function(index) {
        //     layer.close(index)
        //   }
        // })
      },
      OpenLine: object => {
        this.flowLineDesignObject = object
        this.dialogLineVisible = true
        // abp.message.success('分支条件暂时只对企业版开放')
      }
    })

    // var schemeContent = { 'title': 'newFlow_1', 'initNum': 16, 'lines': [{ 'id': '1564334158551', 'type': 'sl', 'from': '1564334138399', 'to': '1564334153687', 'name': '', 'dash': false, 'Compares': null }, { 'id': '1564334159304', 'type': 'sl', 'from': '1564334153687', 'to': '1564334154471', 'name': '', 'dash': false, 'Compares': [{ 'Operation': '<', 'FieldName': 'DAYS', 'FieldType': null, 'Value': '3' }] }, { 'id': '1564334160383', 'type': 'sl', 'from': '1564334153687', 'to': '1564334155295', 'name': '天数 >= 3', 'dash': false, 'Compares': [{ 'Operation': '>=', 'FieldName': 'DAYS', 'FieldType': null, 'Value': '3' }] }, { 'id': '1564334161911', 'type': 'sl', 'from': '1564334154471', 'to': '1564334156607', 'name': '', 'dash': false, 'Compares': null }, { 'id': '1564334163959', 'type': 'sl', 'from': '1564334155295', 'to': '1564334156607', 'name': '', 'dash': false, 'Compares': null }, { 'id': '1564334165255', 'type': 'sl', 'from': '1564334156607', 'to': '1564334139783', 'name': '', 'dash': false, 'Compares': null }], 'nodes': [{ 'id': '1564334138399', 'name': 'node_1', 'type': 'start round mix', 'left': 44, 'top': 27, 'width': 26, 'height': 26, 'alt': true, 'setInfo': null }, { 'id': '1564334139783', 'name': 'node_2', 'type': 'end round', 'left': 50, 'top': 295, 'width': 26, 'height': 26, 'alt': true, 'setInfo': null }, { 'id': '1564334153687', 'name': '所有人可以审批', 'type': 'node', 'left': 163, 'top': 43, 'width': 104, 'height': 56, 'alt': true, 'setInfo': { 'NodeDesignate': 'ALL_USER', 'NodeDesignateData': { 'users': [], 'roles': [], 'orgs': null }, 'NodeCode': null, 'NodeName': null, 'ThirdPartyUrl': '', 'NodeRejectType': null, 'Taged': 1, 'UserName': 'test', 'UserId': '6ba79766-faa0-4259-8139-a4a6d35784e0', 'Description': '', 'TagedTime': '2019-07-29 01:29', 'NodeConfluenceType': 'all', 'ConfluenceOk': null, 'ConfluenceNo': null }}, { 'id': '1564334154471', 'name': '小于3的test可以审批', 'type': 'node', 'left': 23, 'top': 141, 'width': 167, 'height': 76, 'alt': true, 'setInfo': { 'NodeDesignate': 'SPECIAL_USER', 'NodeDesignateData': { 'users': ['6ba79766-faa0-4259-8139-a4a6d35784e0'], 'roles': [], 'orgs': null }, 'NodeCode': null, 'NodeName': null, 'ThirdPartyUrl': '', 'NodeRejectType': null, 'Taged': null, 'UserName': null, 'UserId': null, 'Description': null, 'TagedTime': null, 'NodeConfluenceType': 'all', 'ConfluenceOk': null, 'ConfluenceNo': null }}, { 'id': '1564334155295', 'name': '大于3的admin可以审批', 'type': 'node', 'left': 288, 'top': 146, 'width': 143, 'height': 56, 'alt': true, 'setInfo': { 'NodeDesignate': 'SPECIAL_USER', 'NodeDesignateData': { 'users': ['49df1602-f5f3-4d52-afb7-3802da619558'], 'roles': [], 'orgs': null }, 'NodeCode': null, 'NodeName': null, 'ThirdPartyUrl': '', 'NodeRejectType': null, 'Taged': null, 'UserName': null, 'UserId': null, 'Description': null, 'TagedTime': null, 'NodeConfluenceType': 'all', 'ConfluenceOk': null, 'ConfluenceNo': null }}, { 'id': '1564334156607', 'name': '默认', 'type': 'node', 'left': 171, 'top': 291, 'width': 104, 'height': 36, 'alt': true, 'setInfo': { 'NodeDesignate': 'ALL_USER', 'NodeDesignateData': { 'users': [], 'roles': [], 'orgs': null }, 'NodeCode': null, 'NodeName': null, 'ThirdPartyUrl': '', 'NodeRejectType': null, 'Taged': null, 'UserName': null, 'UserId': null, 'Description': null, 'TagedTime': null, 'NodeConfluenceType': 'all', 'ConfluenceOk': null, 'ConfluenceNo': null }}], 'areas': [] }
    // $('#flowViewPanel').flowdesign({
    //   height: 600,
    //   widht: 300,
    //   top: 100,
    //   haveTool: false,
    //   isprocessing: true,
    //   activityId: '1564334154471',
    //   nodeData: schemeContent.nodes,
    //   flowcontent: schemeContent
    // })
  },
  methods: {
    onSetNodeEx(nodedata) {
      this.flowDesignPanel.SetNodeEx(this.flowNodeDesignObject.id, nodedata)
    },

    onSetLineEx(linedata) {
      this.flowDesignPanel.SetLineEx(this.flowLineDesignObject.id, linedata)
    },

    onSave() {
      var content = this.flowDesignPanel.exportDataEx()
      console.log(content)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/vendor/flow/GooFlow.css";
</style>
